<template>
	<div class="life">
		<h2>爱生活</h2>
		<div class="floor-container clearfix">
			<div class="floor-graphic-item clearfix">
				<div class="floor-graphic-item-all floor-graphic-item-l">
					<div class="graphic-text">
						<strong>超市</strong>
						<p>疯狂星期五</p>
						<span>买二免一</span>
					</div>
					<div class="graphic-img">
						<img src="//m.360buyimg.com/mobilecms/jfs/t3133/213/3264396899/21774/6fd4eaef/57ee152cN839b70c0.jpg!q70.jpg" />
					</div>
				</div>
				<!--end floor-graphic-item-l-->
				<div class="floor-graphic-item-all floor-graphic-item-r">
					<div class="graphic-text">
						<strong>爱家</strong>
						<p>自营3件8.8折</p>
					</div>
					<div class="graphic-img">
						<img src="//m.360buyimg.com/mobilecms/jfs/t3058/79/3117173410/7468/632069d6/57ec806aNe90ecee6.jpg!q70.jpg" alt="" />
					</div>
				</div>
				<!--end floor-graphic-item-r-->
			</div>
			<div class="real-show clearfix">
				
				<div class="graphic-text" v-for="item in baobao">
					<div class="abaobao">
						<strong>{{item.baobaoTitle}}</strong>
						<span>{{item.baobaoSales}}</span>
					</div>
					<div class="abaobao-img">
						<img :src=item.baoboaUrl />
					</div>
				</div>
				
			</div>
		</div>
	</div>	
</template>

<script>
	
	export default {
		data() {
			return {
				baobao: [
					{
						'baobaoTitle': '爱宝宝',
						'baobaoSales': '满299减100',
						'baoboaUrl': '//m.360buyimg.com/mobilecms/jfs/t3160/99/2287152729/26486/19babe3e/57df8affN3496a8ae.png!q70.jpg'
					},{
						'baobaoTitle': '爱美丽',
						'baobaoSales': '梦妆两件八折',
						'baoboaUrl': '//m.360buyimg.com/mobilecms/jfs/t3295/86/3210509899/31950/9bd8300c/57ee252aNa587474d.png!q70.jpg'
					},{
						'baobaoTitle': '爱吃',
						'baobaoSales': '百草味满减',
						'baoboaUrl': '//m.360buyimg.com/mobilecms/jfs/t3277/127/3264032069/37830/92dad57f/57ee15a4N9e5fd542.png!q70.jpg'
					},{
						'baobaoTitle': '爱逛',
						'baobaoSales': '拉夏低至5折',
						'baoboaUrl': '//m.360buyimg.com/mobilecms/jfs/t3250/118/1847080048/9514/75b9edc8/57d6139eNa48679cd.jpg!q70.jpg'
					}
				]
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	
@import "../../../assets/css/variables.scss";

.life {
	h2 {
		text-align: center;
		font-size: $defaultPadding;
		background: $while;
		font-family: "microsoft yahei", arial;
		padding: $defaultPadding/2 0;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}
	.floor-container {
		background: $while;
		.floor-graphic-item-all {
			float: left;
			width: $w100/2;
			box-sizing: border-box;
			.graphic-text {
				display: inline-block;
				width: 50%;
				padding-left: $defaultPadding/2;
				box-sizing: border-box;
				strong {
					width: 100%;
					display: inline-block;
					margin-top: $defaultPadding/4;
					line-height: $defaultPadding;
				}
				p {
					margin-top: $defaultPadding/4;
				}
				span {
					color: $while;
					background: #ff4a7d;
				}
			}
			.graphic-img {
				display: inline-block;
				width: 40%;
				padding-left: $defaultPadding/2;
				box-sizing: border-box;
				img {
					width: 100%;
				}
			}
		}
	}
	/* floor-container */
	.real-show {
		margin-top: $defaultPadding; 
		border-top: 1px solid $rootScopeColor;
		.graphic-text {
			float: left;
			width: 25%;
			box-sizing: border-box;
			border-left: 1px solid $rootScopeColor;
			div {
				text-align: center;
				strong {
					display: block;
					padding-left: 2px;
					padding-top: $defaultPadding/5;
				}
			}
			.abaobao-img {
				width: 90%;
				padding: 10px;
				box-sizing: border-box;
				img {
					width: 100%;
				}
			}
		}
	}
	/* real-show */
	
}
	
</style>
